﻿@(Html.DevExtreme().Chart()
    .ID("chart")
    .Palette(VizPalette.Vintage)
    .CommonSeriesSettings(s => s
        .ArgumentField("Year")
        .Type(SeriesType.FullStackedBar)
    )
    .Series(s => {
        s.Add().ValueField("Africa").Name("Africa");
        s.Add().ValueField("Asia").Name("Asia");
        s.Add().ValueField("Europe").Name("Europe");
        s.Add().ValueField("Latinamerica").Name("Latin America & Caribbean");
        s.Add().ValueField("Northamerica").Name("Northern America");
        s.Add().ValueField("Oceania").Name("Oceania");
        s.Add().Axis("Total").Type(SeriesType.Spline).ValueField("Total").Name("Total").Color("#008fd8");
    })
    .ValueAxis(a => {
        a.Add().Grid(g => g.Visible(true));
        a.Add()
            .Name("Total")
            .Position(Position.Right)
            .Grid(g => g.Visible(true))
            .Title(t => t.Text("Total Population, billions"));
    })
    .Tooltip(t => t
        .Enabled(true)
        .Shared(true)
        .Format(f => f.Type(Format.LargeNumber).Precision(1))
        .CustomizeTooltip(@<text>
            function (arg) {
                var items = arg.valueText.split("\n"),
                    color = arg.point.getColor();
                $.each(items, function(index, item) {
                    if(item.indexOf(arg.seriesName) === 0) {
                        items[index] = $("<span>")
                                        .text(item)
                                        .addClass("active")
                                        .css("color", color)
                                        .prop("outerHTML");
                    }
                });
                return { text: items.join("\n") };
            }
        </text>)
    )
    .Legend(l => l
        .VerticalAlignment(VerticalEdge.Bottom)
        .HorizontalAlignment(HorizontalAlignment.Center)
    )
    .Export(e => e.Enabled(true))
    .Title(t => t.Text("Evolution of Population by Continent"))
    .DataSource(new[] {
        new { Year = "1750", Africa = 106000000L, Asia = 502000000L, Europe = 163000000L, Latinamerica = 16000000L, Northamerica = 2000000L, Oceania = 2000000L, Total = 791000000L },
        new { Year = "1800", Africa = 107000000L, Asia = 635000000L, Europe = 203000000L, Latinamerica = 24000000L, Northamerica = 7000000L, Oceania = 2000000L, Total = 978000000L },
        new { Year = "1850", Africa = 111000000L, Asia = 809000000L, Europe = 276000000L, Latinamerica = 38000000L, Northamerica = 26000000L, Oceania = 2000000L, Total = 1262000000L },
        new { Year = "1900", Africa = 133000000L, Asia = 947000000L, Europe = 408000000L, Latinamerica = 74000000L, Northamerica = 82000000L, Oceania = 6000000L, Total = 1650000000L },
        new { Year = "1950", Africa = 229895000L, Asia = 1403388000L, Europe = 547287000L, Latinamerica = 167368000L, Northamerica = 171614000L, Oceania = 12675000L, Total = 2532227000L },
        new { Year = "2000", Africa = 811101000L, Asia = 3719044000L, Europe = 726777000L, Latinamerica = 521419000L, Northamerica = 313289000L, Oceania = 31130000L, Total = 6122770000L },
        new { Year = "2050", Africa = 2191599000L, Asia = 5142220000L, Europe = 719257000L, Latinamerica = 750956000L, Northamerica = 446862000L, Oceania = 55223000L, Total = 9306128000L }
    })
)
